<template>
  <div class="login">
    <section class="login-box">
      <p class="login-title">数据大屏管理中心</p>
      <el-form ref="loginFormRef" :model="loginForm" status-icon :rules="rules" class="loginForm">
        <section class="choose-handle">
          <p class="choose isActive">用户登录</p>
          <p class="choose">忘记密码</p>
        </section>
        <el-form-item prop="userName" class="form-item">
          <img src="/src/assets/imgs/login/login_user.png/" class="ico username" />
          <el-input
            prefix-icon="el-icon-search"
            v-model="loginForm.userName"
            type="text"
            autocomplete="off"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item prop="passWord" class="form-item">
          <img src="/src/assets/imgs/login/login_pass.png/" class="ico password" />
          <el-input
            prefix-icon="el-icon-search"
            v-model="loginForm.passWord"
            type="password"
            autocomplete="off"
            placeholder="请输入密码"
          />
        </el-form-item>
        <el-form-item>
          <el-button class="submit-btn" type="primary" @click="submitForm('loginFormRef')">登 陆</el-button>
        </el-form-item>
      </el-form>
    </section>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
let loginForm = ref({
  userName: '', // 用户名
  passWord: '' // 密码
})
let rules = ref({
  userName: [{ required: true, message: '账号不能为空', trigger: 'blur' }],
  passWord: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
})

// 定义路由
const router = useRouter()

// 表单提交
const submitForm = (formVal) => {
  if (loginForm.value.userName !== 'admin')
    return ElMessage({ type: 'warning', message: '账号错误！', showClose: true })
  if (loginForm.value.passWord !== 'admin')
    return ElMessage({ type: 'warning', message: '密码错误！', showClose: true })
  router.push({
    path: '/main'
  })
}
</script>

<style scoped lang="less">
.login {
  .width_height(100vw, 100vh);
  .D_J_A(center, center);
  box-sizing: border-box;
  background-image: url('/src/assets/imgs/login/login_bg.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;

  .login-box {
    .D_J_A(center, center);
    flex-direction: column;
    .login-title {
      font-size: 48px;
      font-family: 'PMZDBiaoTi-regular';
      color: #409eff;
    }
    .loginForm {
      .width_height(35vw, 47vh);
      background-image: url('/src/assets/imgs/login/loginForm_bg.png');
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 100%;
      margin: 60px 0 0 -10px;
      padding: 8%;

      // 选择
      .choose-handle {
        .width_height(100%, 20px);
        padding: 11% 14% 5%;
        .D_J_A(space-between, center);
        .choose,
        .isActive {
          color: #409eff;
          font-family: 'SourceHanSansSC-regular';
        }
        .choose {
          font-size: 16px;
          opacity: 0.6;
        }
        .isActive {
          font-size: 20px;
          opacity: 1;
        }
      }

      .form-item,
      .submit-btn {
        width: 80%;

        margin-left: 10%;
      }

      /deep/ .form-item {
        position: relative;

        .el-input__wrapper {
          background-color: transparent !important;
          border: 0.5px solid #409eff;
          height: 4vh !important;
          box-shadow: none;
          border-radius: 5px;
        }

        .el-input__inner {
          color: #fff !important;
        }

        .ico {
          position: absolute;
          left: 7px;
        }
      }

      .submit-btn {
        border-radius: 20px;
        height: 4vh;
        font-size: 18px;
        font-weight: 600;
      }
    }
  }
}
</style>
